/** @type {import('tailwindcss').Config} */
// 定义多个主题
const themes = {
  default: {
    primary: '#38b6a1', // 主色调
    secondary: '#28b59b', // 辅助色
    accent: '#319685', // 强调色
    dark: '#1F2937', // 深色
    light: '#F9FAFB' // 浅色
  },
  red: {
    primary: '#EF4444', // 红色作为主色调
    secondary: '#F97316', // 橙色作为辅助色
    accent: '#EC4899', // 粉色作为强调色
    dark: '#1F2937', // 深色
    light: '#FEF2F2' // 浅红色
  },
  teal: {
    primary: '#14B8A6', // 青色作为主色调
    secondary: '#0D9488', // 深青色作为辅助色
    accent: '#38BDF8', // 浅蓝色作为强调色
    dark: '#0F172A', // 深色
    light: '#F0FDFA' // 浅青色
  }
}

export default {
  content: [
    './src/**/*.{vue,js,ts,jsx,tsx}', // 匹配所有 Vue/JS/TS 文件
    './index.html'
  ],
  theme: {
    screens: {
      xs: '360px', // 新增xs断点（360px+）
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
      '2xl': '1536px',
      '3xl': '1920px' // 新增3xl断点（1920px+）
    },
    extend: {
      colors: themes.default // 默认使用default主题
    }
  },
  // 为每个主题创建自定义工具类
  plugins: [
    function ({ addBase, theme }) {
      // 添加基础样式
      addBase({
        ':root': {
          '--color-primary': theme('colors.primary'),
          '--color-secondary': theme('colors.secondary'),
          '--color-accent': theme('colors.accent'),
          '--color-dark': theme('colors.dark'),
          '--color-light': theme('colors.light')
        }
      })
    }
  ]
}
